<template>
  <div class="bg-shadow">
    <div class="add-coin">
      <div class="header flex-center">
        <span>{{actionObj[action]}}</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        class="form"
        label-width="150px"
        label-position="left"
        size="small"
      >
        <el-form-item label="快讯标题" prop="title">
          <el-input v-model="form.title" placeholder="请填写快讯标题" :disabled="canOperate"></el-input>
        </el-form-item>
        <el-form-item label="是否高亮" prop="highlight">
          <el-select
            v-model="form.highlight"
            placeholder="请选择是否高亮"
            filterable
            :disabled="canOperate"
          >
            <el-option
              v-for="item in highlight"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否置顶" prop="top">
          <el-select v-model="form.top" placeholder="请选择是否置顶" filterable :disabled="canOperate">
            <el-option
              v-for="item in top"
              :value="item.value"
              :label="item.label"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快讯内容" prop="content">
          <el-input
            type="textarea"
            :maxlength="300"
            class="myTextarea"
            :rows="8"
            v-model="form.content"
            placeholder="请填写快讯内容"
            :disabled="canOperate"
          ></el-input>
        </el-form-item>
        <div class="flex-center">
          <el-button size="small" type="primary" @click="submit" v-if="action != 'view'">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  addNews,
  updateNews,
  getNewsDetail
} from "@/views/NewsManage/news.service";

export default {
  props: ["operateData", "action"],
  data() {
    return {
      canOperate: false,
      form: {
        title: "",
        content: "",
        top: null,
        highlight: null
      },
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        content: [{ required: true, message: "内容不能为空", trigger: "blur" }],
        top: [{ required: true, message: "是否置顶不能为空", trigger: "blur" }],
        highlight: [
          { required: true, message: "高亮不能为空", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    Object.assign(this.form, this.operateData);
    if (this.action == "view") {
      this.canOperate = true;
    } else {
      this.canOperate = false;
    }
  },
  computed: {
    highlight() {
      return [{ label: "高亮", value: 1 }, { label: "正常", value: 0 }];
    },
    top() {
      return [{ label: "非置顶", value: 0 }, { label: "置顶", value: 1 }];
    },
    actionObj() {
      return {
        add: "添加",
        view: "查看",
        edit: "编辑",
        del: "删除"
      };
    }
  },
  methods: {
    async submit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          let res = {};
          if (this.action == "add") {
            res = await addNews(this.form);
          } else if (this.action == "edit") {
            res = await updateNews(this.form);
          }
          if (res.code === 0) {
            this.$notify.success({
              title: "提示",
              message: "操作成功"
            });
            this.$emit("success");
          }
        } else {
          this.$notify.warning({
            title: "提示",
            message: "请检查参数！"
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.bg-shadow {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
}

.add-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  min-width: 600px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  border-radius: 3px;

  .header {
    margin-bottom: 10px;
    padding: 15px 0;

    span {
      font-weight: 600;
      font-size: 18px;
    }

    i {
      position: absolute;
      right: 10px;
      font-size: 20px;
      cursor: pointer;
      transition: 0.2s;
    }

    i:hover {
      color: #409eff;
    }
  }

  .form {
    padding: 20px 50px;
    max-height: 600px;
    overflow-y: scroll;

    .tab-item {
      position: relative;

      label {
        position: absolute;
        top: 55px;
      }
    }

    .el-input-number {
      width: 100%;
    }

    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .el-tabs__item {
      padding: 0 40px;
    }

    .el-upload__tip {
      line-height: 20px;
      color: #d93a49;
    }

    .scaleIMGdisabled {
      .el-upload--picture-card {
        display: none;
      }
    }
  }
}

.myTextarea {
  word-break: break-all;
}
</style>
